<template>
    <div>
      <h3>会员权益增加</h3>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td >权益名称</td>
            <td><input type="text" v-model="queryInfo.RightName" /></td>
          </tr>
          <tr>
            <td >状态</td>
            <td>
              <input
                type="radio"
                name="state"
                v-model="queryInfo.State"
                :value="1"
              />开启
              <input
                type="radio"
                name="state"
                v-model="queryInfo.State"
                :value="0"
              />禁用
            </td>
          </tr>
          <tr>
            <td ></td>
            <td><input type="button" value="添加"  class="btn btn-success" @click="ok" /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import axios from 'axios';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  
  //声明向后端口传递的相应式数据
  let queryInfo = reactive({
    RightName: '', //权益名称
    State: 1, //状态
  });
  
  //增加权益
  const ok = () => {
    //1.非空+有效性
    if (queryInfo.RightName == '') {
      alert('会员权益不能为空');
      return;
    }
    //2.发送网络请求
    axios({
      url: '/api/Members/MemberRightAdd',
      method: 'post',
      data: queryInfo,
    })
      .then((res) => {
        console.log(res);
        if (res.data == 1) {
          alert('添加成功');
          //跳转到列表页面
          router.push('/membserRightList');
        } else if (res.data == -1) {
          alert('权益名称重复');
          return;
        } else {
          alert('添加失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  </script>
  
  <style scoped></style>